<!DOCTYPE html>
<html>
<head>
  <meta charset='UTF-8'>
  <title>Matchday Example / football.db JSON(P) API</title>
  
  <script src='js/libs/jquery-2.0.2.min.js'></script>
  <script src='js/libs/underscore-1.4.4.min.js'></script>
  <script src='js/libs/require-2.1.6.js'></script>

  <style>
    
    .football-widget a {
      color: black;
      text-decoration: none;
      display: inline-block;
      min-width: 24px;
      text-align: center;
    }

    .football-widget a:hover {
      background-color: lime;
    }
    
    .football-widget {
       border: 1px solid green;
       padding: 4px;
       margin: 12px;
    }

    .football-widget .rounds {
       margin-bottom: 10px;
    }

    .football-widget tr.game-day td {
      border-top: 1px solid black;
      border-bottom: 1px solid black;
    }
    .football-widget tr.game td:nth-child(1) {
      text-align: right;
    }
  </style>

  <script>
    require.config( {
      paths: {
        'text': 'libs/require-text-2.0.7'   // require.js text plugin
      },
      baseUrl: 'js'
    });

    require( ['football/widget'], function(Widget) {

      $(document).ready( function() {

        Widget.create( '#de',{ event: 'de.2012_13', tplId: '#deTpl'} );

      });

    }); // fn require
  </script>
  
</head>
<body>

<script type='text/template' id='deTpl'>
<table>
 <%  var last_play_at =  new Date( 1970, 1, 1 );
     _.each( games, function( game, index ) {
        var play_at = new Date( game.play_at );
        if( cmp_date( last_play_at, play_at ) !== 0 )  {
          last_play_at = play_at;
      %>
         <tr class='game-day'><td colspan='3'><%= fmt_date( play_at ) %></td></tr>
        <% } %>
   <tr class='game'>
     <td> 
       <%= game.team1_title %> (<%= game.team1_code %>)
     </td>

     <td>
      <% if( game.score1 != null && game.score2 != null ) { %>
        <% if( game.score1ot != null && game.score2ot != null ) { %>
          <% if ( game.score1p != null && game.score2p != null ) { %>
             <%= game.score1p %> - <%= game.score2p %> iE /
          <% } %>
          <%= game.score1ot %> - <%= game.score2ot %> nV /
        <% } %>
        <%= game.score1 %> - <%= game.score2 %>
      <% } else { %>
        - 
      <% } %>
     </td>
     <td>
      <%= game.team2_title %> (<%= game.team2_code %>)
     </td>
   </tr>
  <% }); %>
</table>
</script>



<h1>Matchday Example / football.db JSON(P) API</h1>

<div id='de'></div>

</body>
</html>
